<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true" style="margin-left: 25px;">
                    <el-form-item label="用户名称" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 220px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="用户手机号" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 220px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="状态" prop="phonenumber">
                        <el-select v-model="form.dept" placeholder="请选择" clearable style="width: 220px"
                            :disabled="dialogType == 3">
                            <el-option label="已通过" value="1" />
                            <el-option label="已拒绝" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 0px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList"
                    style="margin-top: 30px;margin-left: 10px;margin-right: 10px;width: calc(100% - 20px);">
                    <el-table-column type="index" width="50" label="序号" />
                    <el-table-column label="权限名称" align="center" key="name" prop="name" />
                    <el-table-column label="申请用户" align="center" key="name" prop="name" />
                    <el-table-column label="手机号" align="center" key="name" prop="name" />
                    <el-table-column label="申请时间" align="center" key="name" prop="name" />
                    <el-table-column label="状态" align="center" key="name" prop="name" />
                    <el-table-column label="申请描述" align="center" key="phone" prop="phone" />
                    <el-table-column label="说明" align="center" key="phone" prop="phone" />
                    <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width"
                        width="120px">
                        <template #default="scope">
                            <el-button link type="danger" @click="showRejectPop(scope.row)">驳回</el-button>
                            <el-button link type="primary" @click="handlePass(scope.row)">通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>

        <el-dialog v-model="dialogVisible" draggable title="驳回申请" width="600px">
            <el-form label-width="100px">
                <el-form-item label="驳回说明" style="margin-left: 0px;">
                    <el-input v-model="rejectContent" autocomplete="off" style="width: 400px"
                        :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleReject">确认驳回</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
 
<script setup name="User">
import { delUser } from "@/api/system/user";
const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const total = ref(0);
const dialogType = ref(1)
const dialogOpItem = ref({})
const dialogVisible = ref(false)
const rejectContent = ref('')

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    rules: {
    },
});

const { queryParams, form } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        detectionList.value = [{}];
        total.value = 0;
    }, 1000);
    // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    //     loading.value = false;
    //     detectionList.value = res.rows;
    //     total.value = res.total;
    // });
};

getList();

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
};

const showRejectPop = (row) => {
    dialogVisible.value = true
    dialogOpItem.value = row
}

const handleReject = () => {
    dialogVisible.value = false
    proxy.$modal.msgSuccess("操作成功");
};


const handlePass = (row) => {
    proxy.$modal.confirm('是否确认 "通过" 该权限申请？').then(function () {
        return delUser(row.userId || '');
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("操作成功");
    }).catch(() => { });
};

</script>
 

<style lang="scss" scoped>
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin: 0 20px;
    border-left: 4px #00BFFF solid;
}

.now-select-txt {
    font-size: 15px;
    color: #fff;
    background: #00BFFF;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;

    span {
        font-size: 20px;
        font-weight: bold;
        margin: 0 10px;
    }

    div {
        cursor: pointer;
        margin-left: 30px;
        font-weight: bold;
    }
}
</style>